<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3616779_xsp5g0y61le.css">
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            ul,li{
                list-style: none;
            }
            #div1{
                width: 600px;
                margin: 30px auto;
            }
            .list{
                width: 600px;
                margin: 0 auto;
            }
            .list li{
                line-height: 30px;
                padding: 0 20px;
                display: flex;
                flex: 1;
                justify-content: space-between;
                border-bottom: 1px solid #000;
            }
            .list li span{
                flex: 2;
                text-indent: 20px;
                /* margin-right: auto;
                margin-left: 20px; */
            }
            .list li i{
                font-size: 20px;
                color: rgb(10, 24, 10);
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <input type="text" id="text" />
            <button id="btn">添加</button>
        </div>
        
        <ul class="list">
            <h1>正在进行</h1>
            <li>
                <input type="checkbox" />
                <span>content</span>
                <time>2022-08-31 10:10:30</time>
                <i class="iconfont icon-delete"></i>
            </li>
        </ul>
    </body>
    <script type="module" src="./src/index.js"></script>
</html>
        <!--移动web开发-->
        <!--前端开发工程化：
            系统化
            模块化-js代码（import export）
            <构建环境>
            组件化-页面
            规范化
            自动化
        -->
        <!--web开发一（html、css）
            web开发二
            JS进阶
            H5C3

            
        -->

        